<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>粤桂楼</title>
    <link rel="stylesheet" href="/static/web/css/style2020.css" />
</head>

<body>
<div class="wrapper" id="app">
    <header class="header">
        <h1>粤桂楼</h1>
        <p>请您对本次的菜品和服务做个评价</p>
        <div class="form">
            <div class="form-item">
                <div class="form-item__lable">座位号：</div>
                <div class="form-item__content">
                    <select class="select" v-model="model.num">
                        <option value="">请选择座位号</option>
                        {volist name="tables" id="vo"}
                        <option value="{$vo.id}">{$vo.catname}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="form-item">
                <div class="form-item__lable">服务员编码：</div>
                <div class="form-item__content">
                    <select class="select" v-model="model.code">
                        <option value="">请选择服务员编号</option>
                        {volist name="waiters" id="vo"}
                        <option value="{$vo.id}">00{$vo.id}</option>
                        {/volist}
                    </select>
                </div>
            </div>
        </div>
    </header>
    <main class="main">
        <template v-for="(item, index) in formList">
            <ui-form :title="item.title" :options="item.options" v-model="model.forms[index]" :key="index"></ui-form>
        </template>
        <div class="is-center" id="btn">
            <input type="button" class="button submit-button" value="提 交" @click="handleSubmit" />
        </div>

        <div id="mask">
            <div class="success" id="popup">
                <div class="left_c">
                    <h2>感谢您的评价！</h2>
                    <p>您的意见我们一定虚心接受！</p>
                </div>
                <span id="close">X</span>
            </div>
        </div>
    </main>
    <footer class="footer"></footer>
</div>

<!-- 表单模板 -->
<script type="text/template" id="form">
    <div class="form">
        <div class="form-hd">
            <div class="form-hd__title"><span>{{title}}</span></div>
        </div>
        <div class="form-bd">
            <div class="form-item" v-if="options.radio">
                <div class="form-item__label"></div>
                <div class="form-item__content">
                    <ul class="radio-list">
                        <li class="radio-item" v-for="radio in options.radio.values" :key="radio.value">
                            <label>
                                <input type="radio" :name="title" class="radio" :value="radio.value" v-model="form.radio"> {{radio.label}}
                            </label>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="form-item" v-if="options.select">
                <div class="form-item__label">{{options.select.label}}</div>
                <div class="form-item__content">
                    <select class="select" v-model="form.select">
                        <option v-for="select in options.select.values" :value="select.value"  :key="select.value">{{select.label}}</option>
                    </select>
                </div>
            </div>
            <div class="form-item" v-if="options.textarea">
                <div class="form-item__label"></div>
                <div class="form-item__content">
                    <ul class="tag-list">
                        <li @click="handleToggleTag(tag)" class="tag-item" :value="tag.value" :class="{'is-active': form.tags.includes(tag.value)}" :key="tag.value"  v-for="tag in options.tag.values">{{tag.label}}</li>
                    </ul>
                </div>
            </div>
            <div class="form-item">
                <div class="form-item__label">描述：</div>
                <div class="form-item__content">
                    <textarea class="textarea" v-model="form.textarea" placeholder="点击上方标签，为我们提供您本次就餐更全面的评价，可以帮助更多小伙伴哦！" ></textarea>
                </div>
            </div>
        </div>
    </div>
</script>

<script>
    var fweav =  {$fweav|raw};
    var fwtag = {$fwtag|raw};
    var cpeva = {$cpeva|raw};
    var cptag = {$cptag|raw};
</script>
<script src="/static/common/js/jquery.2.1.1.min.js"></script>
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script src="/static/web/js/main2020.js"></script>

</body>

</html>
<script>
    var oBtn=document.getElementById('btn');
    var oPopup=document.getElementById('popup');
    var oClose=document.getElementById('close');
    var oMask=document.getElementById('mask');

    oClose.onclick=function(){
        oPopup.style.display='none';
        oMask.style.display='none';
        window.location.reload();
    }
</script>